<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="dahuiji.css" />
	
</head>
<body>
	<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="1">超级困难</li>
				<li value="2">非常困难</li>
				<li value="3">比较困难</li>
				<li value="4">就选我吧</li>
			</ul>
	</div>
</body>
</html>
<script>
//	 角色：
//		 * 1.引擎
//		 * 		1. 选择
//		 * 			1》获取元素
//		 * 			2》添加事件
//		 * 			3》移除
//		 * 			4>记录游戏难度
//		 * 		2.加载
//		 * 			1》创建并添加logo
//		 * 			2>创建并添加loading
//		 * 			3>创置背景图运动
//		 * 			4》超时 - 清场 - 开始游戏
//		 * 		3.开始游戏
//		 * 			1》我主飞机入场
//		 * 			2》开火
//		 * 			3》创建敌机
//		 *		4.设置敌机概率
//		 * 2.我方飞机
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置运动
//		 * 		4.开火（注意频率）
//		 * 		5.数组（记录创建的子弹）
//		 * 3.子弹
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置运动
//		 * 		4.爆炸（注意清除子弹和数组中的子弹）
//		 * 4.敌机
//		 * 		1.创建
//		 * 		2.初始化
//		 * 		3.设置定位
//		 * 		4.设置运动 
//		 * 		5.碰撞检测
//		 */
    window.onload = function(){
    	new Engine();
    }
    function Engine(){
    	this.ele = document.getElementById("body_main");
    	this.oUlls = document.getElementsByTagName("li");
    	this.init();
    }
    Engine.prototype = {
    	init : function(){
    		var that = this;
    		for(var i = 0;i < this.oUlls.length;i ++){
    			this.oUlls[i].onclick = function(){
    				this.parentNode.remove(this);
    				that.loadPage();
    				that.frequecy = this.index;
    			}
    		}
    	},
    	loadPage :function(){
    		this.logo = createEle("div","logo");
    		appendBody(this.logo);
    		this.loading = createEle("div","loading");
    		appendBody(this.loading)
    		var that = this;
    		var index = 1;
    		this.loadingTimer = setInterval(function(){
    		   that.loading.style.background = "url(images/loading"+(index ++ % 3 + 1)+".png) no-repeat";
    		},500);
    		var positionY = 0;
    		setInterval(function(){
    			that.ele.style.backgroundPositionY = ++positionY + "px";
    		},50);
    		setTimeout(function(){
    			that.logo.remove();
    			that.loading.remove();
    			clearInterval(that.loadingTimer);
    			that.startGame();
    		},5000)
    	},
    	startGame : function(){
    		Plane.init();
    		Plane.fire(this.frequecy);
    		this.createEnemy();
    	},
    	createEnemy : function(){
    		setInterval(function(){
    			Math.random() > 0.5 ? new Enemy(0) : "";
    		},500)
    		setInterval(function(){
    			Math.random() > 0.5 ? new Enemy(1) : "";
    		},2000)
    		setInterval(function(){
    			Math.random() > 0.2 ? new Enemy(2) : "";
    		},5000)
    	}
    }
    var Plane = {
    	ele : createEle("div","my-warplain"),
    	init: function(){
    		appendBody(this.ele);
    	
        this.ele.style.left = document.documentElement.clientWidth/2 - this.ele.offsetWidth/2 + "px";
        this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
        this.sport();
      },
      sport: function(){
      	var body_main = document.getElementById("body_main");
      	var that = this;
      	document.onmousemove = function(evt){
      		var e = evt || window.event;
      		var left = e.pageX - that.ele.offsetWidth/2;
      		var top = e.pageY - that.ele.offsetHeight/2;
      		if(left <= body_main.offsetLeft){
      			left = body_main.offsetLeft;
      		}else if(left >= body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth){
      			left = body_main.offsetLeft + body_main.offsetWidth - that.ele.offsetWidth;
      		}
      	    that.ele.style.left = left + "px";
      	    that.ele.style.top = top + "px";
      }
    },
      fire : function(frequecy){
      	var defaultFrequecy = 200;
      	switch(frequecy){
      		case 0 : defaultFrequecy = 500; break;
      		case 1 : defaultFrequecy = 300; break;
      		case 2 : defaultFrequecy = 200; break;
      		case 3 : defaultFrequecy = 50;
      	}
      	var id = 0;
      	var that = this;
      	setInterval(function(){
      		that.bullet.push(new Bullet(id));
      		id ++;
      	},defaultFrequecy)
      },
      bullet : []
  }
    function Bullet(id){
    	this.id = id;
    	this.ele = createEle("div","bullet");
    	this.init();
    }
    Bullet.prototype = {
    	init : function(){
    		this.ele.id = this.id;
    		appendBody(this.ele);
    		this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth / 2 - this.ele.offsetWidth / 2 + "px";
    		this.ele.style.top = Plane.ele.offsetTop - this.ele.offsetHeight + "px";
    		this.sport();
    	},
    	sport : function(){
    		var that = this;
    		this.timer = setInterval(function(){
    			that.ele.style.top = that.ele.offsetTop - 10 + "px";
    			if(that.ele.offsetTop <= 10){
    				that.boom();
    			}
    		},50);
    	},
    	boom : function(){
    		this.ele.className = "bullet_die";
    		clearInterval(this.timer);
    		var that = this;
    		setTimeout(function(){
    			that.ele.remove();
    			for(var i = 0;i < Plane.bullet.length;i ++){
    				if(that.ele.id == Plane.bullet[i].id){
    					Plane.bullet.splice(i,1);
    				}
    			}
    		},50)
    		
    	}
    }
    function Enemy(type){
    	this.type = type;
    	this.init();
    }
    Enemy.prototype = {
    	init : function(){
    		switch(this.type){
    			case 0 : this.ele = createEle("div","enemy-small");
    			         this.hp = 1;
    			         this.speed = 20;
    			         break;
    			case 1 : this.ele = createEle("div","enemy-middle");
    			         this.hp = 5;
    			         this.speed = 10;
    			         break;
    			case 2 : this.ele = createEle("div","enemy-large");
    			         this.hp = 20;
    			         this.speed = 3;
    		}
    		appendBody(this.ele);
    		this.position();
    	},
    	position : function(){
    		var boay_main = document.getElementById("body_main");
    		this.ele.style.left = randInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
    		this.ele.style.top = 0;
    		this.sport();
    	},
    	sport : function(){
    		var that = this;
    		this.timer = setInterval(function(){
    			that.ele.style.top = that.ele.offsetTop + that.speed + "px";
    			if(that.ele.offsetTop >= document.documentElement.clientHeight){
    				that.ele.remove();
    				clearInterval(that.timer);
    			}
    			that.collision();
    		},50)
    	},
        collision : function(){
        	for(var i = 0;i < Plane.bullet.length;i ++){
        		if( !(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
        			if( !(Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < this.ele.offsetTop || this.ele.offsetTop + this.ele.offsetHeight < Plane.bullet[i].ele.offsetTop)){
        				Plane.bullet[i].boom();
        				this.hp--;
        				if(this.hp < 0){
        					this.ele.remove();
        				}
        			}
        		}
        	}
        }
    }
    
    Element.prototype.remove = function(){
    	this.parentNode.removeChild(this);
    }
    function createEle(target,className){
    	var ele = document.createElement(target);
    	ele.className = className;
    	return ele;
    }
    function appendBody(ele){
    	document.body.appendChild(ele);
    }
    function randInt(min,max){
    	return Math.floor(Math.random()*(max - min + 1) + min);
    }
</script>